<template>
  <div>
    <div class="box-container">
      <el-card class="">
        <div class="candidate-desc-header-name">
          <span>
            <span style="font-weight: 600;color: #1f2f3d;">{{this.index_candidate.candidate_name}}</span>
            <!-- <svg-icon icon-class="attach" /><span>3</span> -->
          </span>
          <span>
            <span class="link-type" style="margin-right:20px;" @click="handleProject()">
              <span><svg-icon icon-class="add_project_s" /> 加入项目</span>
            </span>
            <span class="link-type" style="margin-right:20px;" @click="handleUpdate()">
              <span><svg-icon icon-class="edit" /> 编辑人才</span>
            </span>
            <span>
              <span class='label'></span>
              <span class="link-type"  style="margin-right:20px;"  @click='handleAddComment()'>
                <!-- <span v-if="item.comments" > <svg-icon icon-class="remark" />&nbsp;{{ item.comments.length}}</span>
                <span v-else><svg-icon icon-class="remark" />&nbsp;0</span> -->
                <span><svg-icon icon-class="remark" />新增沟通记录</span>
              </span>
            </span>
          </span>
        </div>
        <div class="candidate-desc-header-company">
          <span class='label'>{{this.index_candidate.company_name ? this.index_candidate.company_name : "暂无"}}-{{this.index_candidate.position ? this.index_candidate.position : "暂无"}}</span>
        </div> 
        <div class="candidate-desc-header-phone">
          <span>
            <span><span class='label'>电话:</span> {{this.index_candidate.mobile_phone ? this.index_candidate.mobile_phone : "暂无"}}</span> 
            <span><span class='label'>邮箱:</span> {{this.index_candidate.email ? this.index_candidate.email : "暂无"}}</span> 
            <span><span class='label'>拥有者:</span>{{getName(this.index_candidate.consultant)}} {{this.index_candidate.consultant_record_date | timeFromNowFilter}}</span> 
          </span>
          <span>
            <!-- <span class='label'>最近联系:</span>
            {{this.index_candidate.newest_contact_time | timeFromNowFilter}} -->
          </span>
        </div>
        <div class="row-candidate-contact-record">
            <span v-if="index_candidate.comments && index_candidate.comments.length >0" >
              <span class='label'>最新沟通({{getName(index_candidate.comments[0].user_id)}} {{index_candidate.comments[0].comment_date | timeFromNowFilter}}):</span>
              <span>{{ index_candidate.comments[0].comment || ''}}</span>
              <span v-if="index_candidate.comments && index_candidate.comments.length >1" class="link-type" @click='handleShowMoreComments(index_candidate)'>更多</span>
            </span>
        </div>
      </el-card>
    </div>
    <div class="box-container">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleSwitchTab">
        <el-tab-pane label="默认" name="candidate">
          <CandidateBase :id='tab_id_group.candidate'> </CandidateBase>
        </el-tab-pane>
        <el-tab-pane label="原始简历" name="origin">
          <CandidateOrigin :id='tab_id_group.origin'> </CandidateOrigin>
        </el-tab-pane>
        <el-tab-pane label="推荐" name="cv">
          <CVTAB :candidate_id="tab_id_group.cv" :project_id="project_id" :tab="tab" > </CVTAB>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="沟通记录" :visible.sync="dialogHistoryCommentsVisible" append-to-body>
      <el-table :data="this.history_comments" border fit highlight-current-row style="width: 100%" >
        <el-table-column  label="备注" width="500px"> 
          <template slot-scope="comment_scope">
            {{comment_scope.row.comment}}
          </template>
        </el-table-column>
        <el-table-column label="时间" width="100px"> 
          <template slot-scope="comment_scope">
            {{comment_scope.row.comment_date | timeFilter('{y}-{m}-{d} {h}:{i}') }}
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
      <el-pagination background 
        @size-change="handleHistoryCommentsSizeChange" 
        @current-change="handleHistoryCommentsCurrentChange" 
        :current-page="history_comments_current_page" :page-sizes="[10,20,30, 50]" 
        :page-size="historyCommentsListQuery.limit" layout="total, sizes, prev, pager, next" 
        :total="historyCommentstotal"
        >
      </el-pagination>
      </div>
    </el-dialog>
    <el-dialog title="新增沟通记录" :visible.sync="commentDialogVisible" append-to-body>
      <el-form  :rules="comment_rules" ref="commentForm" :model="comment_temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="记录" prop="comment">
          <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="comment_temp.comment"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="commentDialogVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="addComment">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>
    <CandidateDialog :id="candiate_dialog.id" :visible="candiate_dialog.visible" :status="candiate_dialog.status" @closeDialog="handleCloseDialog">
    </CandidateDialog>
    <CandidateProject :data="project_dialog.data" :visible="project_dialog.visible" :report="project_dialog.report" @closeDialog="handleCloseProjectDialog">
    </CandidateProject>
  </div>
</template>
<script>
import CVTAB from '@/views/candidate/components/cvTab'
import CandidateOrigin from '@/views/candidate/components/candidateOrigin'
import CandidateBase from '@/views/candidate/components/candidateBase'
import CandidateDialog from '@/views/candidate/components/candidateDialog'
import CandidateProject from '@/views/candidate/components/candidateProject'
import API from '@/utils/backend_api'
export default {
  name: 'candidateDetail',
  components: { CandidateDialog, CandidateProject, CVTAB, CandidateBase, CandidateOrigin },
  data() {
    return {
      index_candidate: {},
      tab_id_group: {
        id: '',
        origin: '',
        candidate: '',
        cv: ''
      },
      tab: 'all',
      project_id: '',
      activeName: '',
      userOptions: this.$store.getters.usersList,
      commentDialogVisible: false,
      dialogHistoryCommentsVisible: false,
      comment_rules: {
        comment: [
          { required: true, message: '必须填写', trigger: 'change' }
        ]
      },
      comment_temp: { comment: '' },
      candiate_dialog: {
        id: '',
        visible: false,
        status: ''
      },
      project_dialog: {
        visible: false,
        data: [],
        report: false
      },
      history_comments: [],
      history_comments_current_page: 1,
      historyCommentstotal: 0,
      historyCommentsListQuery: {
        page: 1,
        offset: 0,
        limit: 10,
        candidate_id: ''
      },
    }
  },
  created() {
    const params = this.$route.params
    if (params.id) {
      this.getIndexData(params.id)
      this.tab_id_group.id = params.id
    } else {
      this.$message.error('人才id不存在')
      return
    }

    if (params.tab) {
      this.activeName = params.tab
    } else {
      this.activeName = 'candidate'
      this.tab_id_group.candidate = params.id
    }

    this.$set(this.tab_id_group, this.activeName, params.id)
  },
  methods: {
    getIndexData(id) {
      if (id && id !== '') {
        API.candidate.getIndex(id).then(response => {
          this.index_candidate = response.data
        })
      }
    },
    handleSwitchTab(selected_tab, event) {
      this.activeName = selected_tab.name
      this.tab_id_group[this.activeName] = this.tab_id_group.id
    },
    handleUpdate() {
      const row = this.index_candidate
      if (row && row.id) {
        this.candiate_dialog = {
          id: row.id,
          visible: true,
          status: 'update'
        }
      }
    },
    handleCloseDialog(val) {
      this.candiate_dialog = {
        id: '',
        visible: false,
        status: ''
      }
      if (val && val.type === 'create_success' && val.data) {
        this.tableData.unshift(val.data)
        // // 打开加入项目界面
        // this.project_dialog = {
        //   data: [{ id: val.data.id, name: val.data.candidate_name }],
        //   visible: true
        // }
      }
      if (val && val.type === 'update_success' && val.data) {
        for (const v of this.tableData) {
          if (v.id === val.data.id) {
            const index = this.tableData.indexOf(v)
            this.tableData.splice(index, 1, val.data)
            break
          }
        }
      }
    },
    handleProject() { 
      const row = this.index_candidate
      this.project_dialog = {
        data: [{ id: row.id, name: row.candidate_name }],
        visible: true,
        report: false
      }
    },
    handleCloseProjectDialog(val) {
      setTimeout(() => {
        this.project_dialog = {
          data: [],
          visible: false
        }
        if (val && val.type === 'batch_project_success' && val.data) {
          // 批量加入项目
          this.$notify({
            title: '成功',
            message: '加入项目成功',
            type: 'success',
            duration: 1000
          })
        }
        if (val && val.type === 'project_success' && val.data) {
          // 打开推荐界面
          this.$notify({
            title: '成功',
            message: '加入项目成功',
            type: 'success',
            duration: 1000
          })
        }
        if (val && val.type === 'report_success' && val.data) {
          // 打开推荐界面
          this.$notify({
            title: '成功',
            message: '加入项目成功',
            type: 'success',
            duration: 1000
          })
          setTimeout(() => {
            this.report_dialog = {
              id: val.data.id,
              visible: true
            }
          }, 1000)
        }
      }, 200)
    },
    getName: function(id) {
      let username = ''
      this.userOptions.map(item => {
        if (item.id === id) {
          username = item.username
          return username
        }
      })
      return username
    },
    handleAddComment() {
      const data = this.index_candidate
      this.comment_temp = { candidate_id: data.id, comment: '' }
      this.commentDialogVisible = true
      this.$nextTick(() => {
        this.$refs['commentForm'].clearValidate()
      })
    },
    addComment() {
      this.$refs['commentForm'].validate((valid) => {
        if (valid) {
          API.candidate.add_comment(this.comment_temp).then((response) => {
            this.index_candidate = response.data
            this.commentDialogVisible = false
            this.comment_temp = { comment: '' }
          })
        }
      })
    },
    handleShowMoreComments(data) {
      this.historyCommentsListQuery.candidate_id = data.id
      this.getHistoryCommentsList(this.historyCommentsListQuery)
      this.dialogHistoryCommentsVisible = true
    },
    getHistoryCommentsList(query) {
      if (query && query.candidate_id) {
        API.candidate.comments(query).then(response => {
          this.history_comments = response.data
          if (response.headers && response.headers['x-total-count']) {
            this.historyCommentstotal = Number(response.headers['x-total-count'])
          }
        })
      } else {
        this.$message({
          showClose: true,
          message: '请先选择人才',
          type: 'warning'
        })
      }
    },
    handleHistoryCommentsSizeChange(val) {
      this.historyCommentsListQuery.limit = val
      this.getHistoryCommentsList(this.historyCommentsListQuery)
    },
    handleHistoryCommentsCurrentChange(val) {
      if (val >= 1) {
        this.history_comments_current_page = val
        this.historyCommentsListQuery.offset = (val - 1) * this.historyCommentsListQuery.limit
        this.getHistoryCommentsList(this.historyCommentsListQuery)
      }
    },
  }
}
</script>
<style scoped>
  .candidate-desc-header-name {
    display:flex;
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: space-between;
    align-items: stretch; 
    align-content: stretch;
    margin-bottom: 10px;
  }
  .candidate-desc-header-company {
    margin-bottom: 10px;
  }
  .candidate-desc-header-phone {
    display:flex;
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: space-between;
    align-items: stretch; 
    align-content: stretch;
    
  }
  .box-container{
    padding: 10px 20px;
  }
  .label {
    text-align:right;
    color:#939393;
    font-weight:normal;
  }
  .row-candidate-contact-record{
    display:flex;
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: flex-start;
    align-items: stretch; 
    align-content: stretch;
    margin-top: 8px;
    font-size: 5px;
  }
</style>

